<template>
    <div id="all">
      <div class="leftCon">
				<div class="title"><span>房间详情</span></div>
				<div class="roomInfo">
					<div class="roomImg info"><img :src="imgUrl(roomInfo.imgPath)" alt=""></div>
					<div class="info">房间名称：{{roomInfo.name}}</div>
					<div class="info">所属区域：{{roomInfo.floor_name}}</div>
					<div class="info">房间类型：{{roomInfo.type_name}}</div>
					<div class="info">房间状态：<span :style="roomInfo.status==1?'color: #00FF00;':'color: #00CED1;'">{{roomInfo.status==1? '正常' : '维护中'}}</span></div>
					<div class="info">房间设备数：{{ deviceCount.total }}</div>
					<div class="info">房间告警：{{roomInfo.alarm}}</div>
					
				</div>
			</div>
      <div class="rightCon">
				<div class="title"><span>设备详情</span> <div class="retun" @click="retHome">返回</div></div>

				<div class="device">
					<div v-for="(item, index) in deviceDataList">
						<device-list class="deviceItem" :deviceData="item" :roomstatus="roomInfo.status"></device-list>
					</div>
				</div>
				
				
				

			</div>

    </div>
</template>
  
  <script>
	import deviceList from "@/components/deviceList/deviceList.vue"
  import {GetRoomDevice, GetRoom} from "@/api/dataReq"
  export default {
    name: 'RoomDevice',
    components: {
      
    },
    data() {
      return {
				roomid:null,
				roomInfo:{},
				deviceDataList:[],
				deviceCount:{},

      }
    },
		components:{
			deviceList
		},
    created(){
			this.roomid = this.$route.query.roomId
			// console.log(this.roomid)
			this.getRoomInfo()
			this.getRoomDevice()
			

    },
		mounted(){
			
		},
    methods:{
			imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
			retHome(){
				// this.$router.push({ path: '/home'})
				this.$router.go(-1);
			},
			getRoomInfo(){
				var reqData = {roomId: this.roomid}
        GetRoom(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
        this.roomInfo = response.data[0]
				this.deviceCount = response.data[0].devicecount
				// console.log(this.roomInfo)

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
			},
			getRoomDevice(){
				var reqData = {roomId: this.roomid}
        GetRoomDevice(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
        this.deviceDataList = response.data
				// console.log(this.deviceDataList)

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
		},

      
    }



  }
  </script>
  <style lang="scss" scoped>
  $allbackcolor: rgba(11,44,108,1);
  $selectcolor: rgba(1,18,67, 1);
  $selectco: rgb(14, 28, 68);
#all{
        background-color: rgba(3,0,3, 1);
        height: 100vh;
        width: 100vw;
		min-height: 700px;
        color: white;
				display: flex;
  			flex-direction: row;
    }
.leftCon{

	min-width: 350px;
	height: 100%;
	min-height: 700px;
	display: flex;
  flex-direction: column;
	background-color:$selectcolor;
	// border: 1px solid rebeccapurple;
	
}
.title{
            float: left;
            line-height: 50px;
            // margin-left: 10px;
						width: 100%;
						background-color:$allbackcolor;
            // margin-top: 20px;
            font-size: 20px;
            font-weight: 500;
            /* 文字间距 */
            letter-spacing: 5px;
            color: white;
            /* 禁止选中 */
            user-select: none;
            /* 文字阴影 */
            text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
						text-align: center;
						
        }
.retun{

	float: right;
	width: 40px;
	height: 40px;
	font-size: 12px;
	border: 1px solid #fff;
	border-radius: 30px;
	margin-top: 5px;
	margin-right: 20px;
	cursor:pointer;
	&:hover{
		background-color: $selectco;
	}
}

.roomInfo{
	display: flex;
  flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;

	

	.info{
		width: 350px;
		height: 45px;
		// border: 1px solid red;
		margin-top: 22px;
		text-align: center;
		line-height: 45px;
		font-size: 18px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.roomImg{
		height: 200px;
		img{
		width: 320px;
		height: 200px;
	}
	}
}
.rightCon{
	width: 100%;
	height: 100vh;
	min-width: 800px;
	min-height: 700px;
	// border: 1px solid red;
	margin-left: 10px;
	background-color:$selectcolor;
	display: flex;
  flex-direction: column;
	// position: relative;
  // overflow: hidden;

}

.device{
	display: flex;
  flex-direction: row;
	// justify-content: space-between;
	flex-wrap: wrap;
	overflow-y: scroll;
	overflow-x: hidden;
	// overflow-y: hidden;
	&::-webkit-scrollbar {
      width: 0;
    }
	.deviceItem{
		margin-left: 50px;
		margin-top: 35px;
	}
	.device::-webkit-scrollbar {
		display: none;/*隐藏滚动条*/
}
}

</style>